<script>
    $("#addLink").click(function () {
        if ($("#add").is(":hidden")) {
          $("#add").load("/cassaco/spent/new");
          $("#add").slideDown("fast");
        }
     });
</script>

<form action="/cassaco/spent/save" method="POST">
<input type="hidden" name="id" value="{{ spent.id }}">
<table>
    <tr>
        <td>Description</td>
        <td colspan=5>
            <input type="text" name="description" 
                style="width:100%" value="{{ spent.description }}"/>
        </td>
    </tr>
    <tr>
        <td>Value</td>
        <td>
            <input type="text" name="value" value="{{ spent.value }}" size="10"/>
        </td>
        <td>When</td>
        <td>
            <input type="text" value="{{ spent.date }}" 
                name="date" id="datepicker" size="10"/>
        </td>
        <script>
        $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
        </script>
        <td>
            Pay mode
        </td>
        <td id="mode">
            <select id="modeSelect"></select>
        </td>
        <script>
            $("#mode").load("/cassaco/mode/getHTMLSelect/{{ spent.mode.id }}");
        </script>
    </tr>
    <tr>
        <td>Type</td>
        <td id="type" width="30%">
            <select id="category"></select>
        </td>
        <script>
            $("#type").load("/cassaco/category/getHTMLSelect/{{ spent.category.id }}");
        </script>
        
        <td width=100px>Sub-type</td>
        <td id="subtype" colspan=3>
            <select disabled=disabled></select>
        </td>
        <script>
        	$("#subtype").load(
                "/cassaco/subcategory/getHTMLSelect/{{ spent.category.id }}/{{ spent.subcategory.id }}");
        </script>
        
        <script>
            $("#type").change(function(){
                value = $("#category").val();
                if (value == 'new') {
                    name = prompt('New type');
                    if (name) {
                        $.post('/cassaco/category/new/',
                            {description: name}, function(returned_data) {
                            	$("#type").load("/cassaco/category/getHTMLSelect/"+returned_data);
                            	$("#subtype").load("/cassaco/subcategory/getHTMLSelect/"+returned_data);
                            });
                    }
                } else {
                    $("#subtype").load(
                        "/cassaco/subcategory/getHTMLSelect/"+value+"/{{ spent.subcategory.id }}");
                }
            });
            
            $("#subtype").change(function(){
                value = $("#subcategory").val();
                catid = $("#category").val();
                if (value == 'new') {
                    name = prompt('New sub-type');
                    if (name) {
                        $.post('/cassaco/subcategory/new/',
                            {description: name, category: catid}, function(data){
                            	$("#subtype").load("/cassaco/subcategory/getHTMLSelect/"+catid+"/"+data);
                            });
                    }
                    $("#subtype").load("/cassaco/subcategory/getHTMLSelect/"+catid);
                }
            });
            
            $("#mode").change(function(){
                value = $("#modeSelect").val();
                if (value == 'new') {
                    name = prompt('New mode');
                    if (name) {
                        $.post('/cassaco/mode/new/',
                            {description: name}, function(data){
                            	$("#mode").load("/cassaco/mode/getHTMLSelect/"+data);
                            });
                    }
                    $("#mode").load("/cassaco/mode/getHTMLSelect/");
                }
            });
        </script>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="submit" value="Save"/>
            {% if spent %}
            <input type="hidden" id="deleteButton" name="delete" value="false">
            <input type="submit" value="Delete" 
                onclick="document.getElementById('deleteButton').value='true';"/>
            {% endif %}
        </td>
    </tr>
</table>

<a id="closeForm" href="#">close</a>
<script>
$("#closeForm").click(function () {$("#add").slideUp("fast");});
</script>
</form>